<template>
  <div class="news-container">
    <!-- 页面标题 -->
    <div class="page-title mb-6">
      <h1 class="text-3xl font-bold text-center">新闻资讯中心</h1>
      <p class="text-gray-600 text-center mt-2">及时、准确、全面的新闻资讯平台</p>
    </div>
    
    <!-- 新闻分类导航 -->
    <div class="category-nav mb-8">
      <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
        <el-tab-pane v-for="category in categoryList"
                     :key="category.categoryId"
                     :label="category.categoryName"
                     :name="category.categoryId">
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 轮播图部分 -->
    <div class="swiper-container mb-8">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(slide, index) in slides" :key="index">
            <img :src="slide.imageUrl" :alt="slide.title" class="w-full h-[400px] object-cover">
            <div class="slide-content">
              <h3 class="text-xl font-bold text-white">{{ slide.title }}</h3>
              <p class="text-white">{{ slide.description }}</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>

    <div class="news-content grid grid-cols-1 lg:grid-cols-4 gap-6">
      <!-- 主要新闻列表 -->
      <div class="main-news lg:col-span-3">
        <el-card v-loading="loading" class="news-list">
          <template #header>
            <span class="text-lg font-bold inline-block mb-4">最新新闻</span>
          </template>
          
          <div class="news-grid">
            <div v-for="(news, index) in newsList" 
                 :key="news.newsId" 
                 :class="['news-item', `news-item-${index % 4}`]">
              <div class="flex flex-col h-full">
                <div class="news-image w-full h-32 mb-2 overflow-hidden">
                  <image-preview :src="news.coverImage" :width="300" :height="128"/>
                </div>
                <div class="news-info flex-1">
                  <h3 class="text-base font-bold mb-1 line-clamp-2">
                    <router-link :to="`/news/${news.newsId}`" class="hover:text-blue-600">
                      {{ news.title }}
                    </router-link>
                  </h3>
                  <p class="text-gray-600 text-sm mb-1 line-clamp-1">{{ news.summary }}</p>
                  <div class="flex justify-between text-xs text-gray-500 mt-auto">
                    <span>{{ news.createTime }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="pagination-container mt-4">
            <el-pagination
              v-model:current-page="queryParams.pageNum"
              v-model:page-size="queryParams.pageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </div>

      <!-- 侧边栏 -->
      <div class="sidebar lg:col-span-1">
        <!-- 热门新闻 -->
        <el-card class="mb-6">
          <template #header>
            <div class="font-bold">热门新闻</div>
          </template>
          <ul class="hot-news-list">
            <li v-for="news in hotNews" :key="news.newsId" class="mb-3">
              <router-link :to="`/news/${news.newsId}`" class="hover:text-blue-600">
                {{ news.title }}
              </router-link>
            </li>
          </ul>
        </el-card>

        <!-- 新闻标签云 -->
        <el-card>
          <template #header>
            <div class="font-bold">新闻标签</div>
          </template>
          <div class="tag-cloud">
            <el-tag
              v-for="tag in tags"
              :key="tag.id"
              :type="tag.type"
              class="m-1"
              @click="handleTagClick(tag)"
            >
              {{ tag.name }}
            </el-tag>
          </div>
        </el-card>
      </div>
    </div>
  </div>

  <!-- 底部信息 -->
  <footer class="footer mt-8 py-6 border-t">
    <div class="max-w-4xl mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="footer-section">
          <h4 class="text-lg font-bold mb-4">关于我们</h4>
          <p class="text-gray-600">我们致力于提供最新、最全面的新闻资讯，为用户打造优质的阅读体验。</p>
        </div>
        <div class="footer-section">
          <h4 class="text-lg font-bold mb-4">快速链接</h4>
          <ul class="space-y-2">
            <li><router-link to="/" class="text-gray-600 hover:text-blue-600">首页</router-link></li>
            <li><router-link to="/newsIndex" class="text-gray-600 hover:text-blue-600">新闻列表</router-link></li>
          </ul>
        </div>
        <div class="footer-section">
          <h4 class="text-lg font-bold mb-4">联系方式</h4>
          <ul class="space-y-2 text-gray-600">
            <li>邮箱：contact@example.com</li>
            <li>电话：400-123-4567</li>
          </ul>
        </div>
      </div>
      <div class="copyright text-center mt-8 pt-4 border-t text-gray-500">
        <p>Copyright © 2024 新闻资讯中心. All Rights Reserved.</p>
      </div>
    </div>
  </footer>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from 'vue';
import Swiper from 'swiper';
import { Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { customerListNews } from "@/api/system/news.js";
import {customerListCategory} from "@/api/system/category.js";
import { ElMessage } from 'element-plus'

// 设置页面标题
document.title = "新闻资讯中心 - 及时、准确、全面的新闻资讯平台";

// 数据定义
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    title: null,
    content: null,
    categoryId: null,
    coverImage: null,
    status: null,
  }
});
const params=ref({
  parentId: 0
});

const { queryParams } = toRefs(data);
const loading = ref(true);
const total = ref(0);
const newsList = ref([]);
const categoryList = ref([]);
const activeCategory = ref('all');

// 模拟数据
const slides = ref([
  { 
    imageUrl: 'https://picsum.photos/1920/500',
    title: '公司最新技术创新成果展示',
    description: '展示公司最新的技术研发成果和创新突破'
  },
  { 
    imageUrl: 'https://picsum.photos/1920/501',
    title: '行业政策解读与分析',
    description: '深入解读最新行业政策，分析政策影响'
  },
  { 
    imageUrl: 'https://picsum.photos/1920/502',
    title: '公司重要业务动态',
    description: '发布公司重要业务进展和战略规划'
  }
]);

const hotNews = ref([
  { newsId: 1, title: '公司成功研发新一代核心技术' },
  { newsId: 2, title: '行业新政策解读：机遇与挑战' },
  { newsId: 3, title: '公司完成新一轮战略融资' },
  { newsId: 4, title: '技术创新引领行业发展新方向' },
  { newsId: 5, title: '公司荣获年度创新企业奖' }
]);
const tags = ref([{
  id: 1,
  type: 'tag',
},{
  id:2,
  type:"tag"
},
  {
    id:3,
    type: "tag"
  }]);

// 获取所有新闻
const getList = () => {
  loading.value = true;
  customerListNews(queryParams.value).then(response => {
    newsList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};
//获取没有父类别的类别列表
const getCategory = () => {
  loading.value = true;
  customerListCategory(params.value).then(response => {
    categoryList.value = response.rows;
  })
}

const handleCategoryChange = (tab) => {
  queryParams.value.categoryId = tab.props.name === 'all' ? null : tab.props.name;
  getList();
};

const handleSizeChange = (val) => {
  queryParams.value.pageSize = val;
  getList();
};

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val;
  getList();
};

const handleTagClick = (tag) => {
  // 处理标签点击事件
  console.log('Tag clicked:', tag);
};

// 生命周期钩子
onMounted(() => {
  //获取新闻
  getList();
  //获取父类类别
  getCategory()
  
  new Swiper('.mySwiper', {
    modules: [Pagination, Navigation],
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev'
    },
    autoplay: {
      delay: 3000,
      disableOnInteraction: false
    }
  });
});
</script>

<style scoped>
.news-container {
  padding: 20px;
  width: 100%;
  max-width: 100%;
}

.page-title {
  text-align: center;
  margin-bottom: 24px;
}

.page-title h1 {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.page-title p {
  font-size: 16px;
  color: #666;
  margin-top: 8px;
}

.category-nav {
  margin-bottom: 24px;
}

:deep(.el-tabs__item) {
  font-size: 18px;
  font-weight: 600;
  padding: 0 24px;
  height: 50px;
  line-height: 50px;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 2px;
}

:deep(.el-tabs__active-bar) {
  height: 3px;
  border-radius: 3px;
}

.swiper-container {
  width: 88%;
  margin: 0 auto;
}

.slide-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

.news-item {
  width: 100%;
  margin-bottom: 0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.news-item-0 {
  background: linear-gradient(to bottom right, #ffffff, #f0f7ff);
  border: 1px solid #e6f0ff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.news-item-1 {
  background: linear-gradient(to bottom right, #ffffff, #fff0f0);
  border: 1px solid #ffe6e6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.news-item-2 {
  background: linear-gradient(to bottom right, #ffffff, #f0fff0);
  border: 1px solid #e6ffe6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.news-item-3 {
  background: linear-gradient(to bottom right, #ffffff, #fff7f0);
  border: 1px solid #ffe6e6;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.news-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
}

.news-item-0:hover {
  border-color: #b3d9ff;
}

.news-item-1:hover {
  border-color: #ffb3b3;
}

.news-item-2:hover {
  border-color: #b3ffb3;
}

.news-item-3:hover {
  border-color: #ffd9b3;
}

.news-image {
  border-radius: 8px;
  overflow: hidden;
}

.news-image img {
  transition: transform 0.3s ease;
}

.news-item:hover .news-image img {
  transform: scale(1.05);
}

.news-info {
  padding: 12px;
}

.news-info h3 a {
  color: #2c3e50;
  text-decoration: none;
  transition: color 0.3s ease;
}

.news-info h3 a:hover {
  color: #409EFF;
}

.news-info p {
  color: #666;
  line-height: 1.5;
}

.news-info div {
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.hot-news-list li {
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.hot-news-list li:last-child {
  border-bottom: none;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

:deep(.el-tag) {
  cursor: pointer;
}

:deep(.el-tag:hover) {
  opacity: 0.8;
}

@media (max-width: 1200px) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

.footer {
  background: #f5f5f5;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 12px 12px 0 0;
  margin-top: 2rem;
}

.footer-section {
  background: transparent;
  padding: 1.5rem;
  border-radius: 8px;
  margin: 0.5rem;
}

.footer-section h4 {
  color: #333333;
}

.footer-section ul li {
  transition: color 0.3s ease;
}

.copyright {
  background: transparent;
  padding: 1rem;
  border-radius: 8px;
  margin-top: 1rem;
}

@media (max-width: 768px) {
  .footer .grid {
    grid-template-columns: 1fr;
  }
}
</style> 